<template>
  <u-skeleton :loading="loading" :animation="true" :title="false">
    <template #content>
      <!-- <scroll-view class="skeleton-container"> -->
      <view class="cust_nav" :style="{ height: navHeight }">
        <view class="navbarTitle"> {{ navbarTitle }} </view>
        <view :class="['search', navStyle.searchWidth == 'auto' ? '' : '']">
          <u-icon
            class="icon"
            name="search"
            :color="
              navStyle.searchText == 'none' && navStyle.searchWidth == 'auto' ? 'white' : '#fff'
            "
            size="28"
          ></u-icon>
        </view>
      </view>
      <view class="skeleton__wrapper">
        <view class="skeleton__wrapper-swiper">
          <view
            class="skeleton__wrapper-swiper-item"
            :style="{
              height:
                +navHeight.replace('px', '') > 85
                  ? 'calc(100vh - 1100rpx)'
                  : 'calc(100vh - 1200rpx)'
            }"
          >
            <view class="skeleton__wrapper-swiper-item-image animate"></view>
          </view>
          <view class="indicator">
            <view
              class="indicator__dot"
              v-for="item in 2"
              :key="item"
              :class="[item === 1 && 'indicator__dot--active']"
            >
            </view>
          </view>
        </view>
        <view class="skeleton__wrapper-title animate"></view>
        <u-scroll-list class="skeleton__wrapper-scroll-list">
          <view class="skeleton__wrapper-scroll-list_item" v-for="item in 5" :key="item">
            <view class="skeleton__wrapper-scroll-image animate"></view>
            <view class="skeleton__wrapper-scroll-title animate"></view>
            <view class="skeleton__wrapper-scroll-desc animate"></view>
          </view>
        </u-scroll-list>
        <view class="skeleton__wrapper-title animate mt-69"></view>
        <u-scroll-list class="skeleton__wrapper-scroll-list">
          <view class="skeleton__wrapper-scroll-list_item" v-for="item in 5" :key="item">
            <view class="skeleton__wrapper-scroll-image animate"></view>
            <view class="skeleton__wrapper-scroll-title animate"></view>
            <view class="skeleton__wrapper-scroll-desc animate"></view>
          </view>
        </u-scroll-list>
        <view class="skeleton__wrapper-title animate mt-69 mb-20"></view>
        <view class="skeleton__wrapper-card" v-for="item in 3" :key="item">
          <view class="skeleton__wrapper-card__image animate"></view>
          <view class="right">
            <view class="skeleton__wrapper-card__title animate"></view>
            <view class="skeleton__wrapper-card__line-2 animate"></view>
            <view class="skeleton__wrapper-card__line-3 animate"></view>
            <view class="skeleton__wrapper-card__line-4 animate"></view>
            <view class="skeleton__wrapper-card__line-4 animate"></view>
            <view class="skeleton__wrapper-card__line-4 animate" style="width: 161rpx"></view>
            <view class="flex-center">
              <view class="skeleton__wrapper-card__line-btn animate"></view>
              <view class="skeleton__wrapper-card__line-btn animate"></view>
            </view>
          </view>
        </view>
        <view class="skeleton__wrapper-title animate mt-69 mb-20"></view>
        <view class="skeleton__wrapper-list">
          <view class="skeleton__wrapper-list-item" v-for="item in 5" :key="item">
            <view class="skeleton__wrapper-list-item__image animate"></view>
            <view class="skeleton__wrapper-list-item__title animate"></view>
            <view class="skeleton__wrapper-list-item__desc animate"></view>
            <view class="skeleton__wrapper-list-item__desc animate" style="width: 240rpx"></view>
          </view>
        </view>
        <view style="height: 50rpx"></view>
      </view>
      <!-- </scroll-view> -->
    </template>
    <slot />
  </u-skeleton>
</template>

<script>
import CustomNavbar from '../../../components/CustomNavbar-home.vue'
export default {
  components: { CustomNavbar },
  name: '',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    navbarTitle: {
      type: String,
      default: ''
    },
    navStyle: {
      type: Object,
      default: () => {}
    },
    navHeight: {
      type: String,
      default: ''
    }
  },
  watch: {
    loading() {
      this.getComponentWidth()
    }
  },
  data() {
    return {
      height: '44px'
    }
  },
  methods: {
    init() {
      this.getComponentWidth()
      // #ifdef APP-NVUE
      this.loading && this.animate && this.setNvueAnimation()
      // #endif
    },
    async setNvueAnimation() {
      // #ifdef APP-NVUE
      // 为了让opacity:1的状态保持一定时间，这里做一个延时
      await uni.$u.sleep(500)
      const skeleton = this.$refs['u-skeleton__wrapper']
      skeleton &&
        this.loading &&
        this.animate &&
        animation.transition(
          skeleton,
          {
            styles: {
              opacity: 0.5
            },
            duration: 600
          },
          () => {
            // 这里无需判断是否loading和开启动画状态，因为最终的状态必须达到opacity: 1，否则可能
            // 会停留在opacity: 0.5的状态中
            animation.transition(
              skeleton,
              {
                styles: {
                  opacity: 1
                },
                duration: 600
              },
              () => {
                // 只有在loading中时，才执行动画
                this.loading && this.animate && this.setNvueAnimation()
              }
            )
          }
        )
      // #endif
    },
    // 获取组件的宽度
    async getComponentWidth() {
      // 延时一定时间，以获取dom尺寸
      await uni.$u.sleep(20)
      // #ifndef APP-NVUE
      this.$uGetRect('.skeleton__wrapper').then((size) => {
        this.width = size.width
      })
      // #endif

      // #ifdef APP-NVUE
      const ref = this.$refs['skeleton__wrapper']
      ref &&
        dom.getComponentRect(ref, (res) => {
          this.width = res.size.width
        })
      // #endif
    }
  },
  components: {}
}
</script>

<style lang="scss" scoped>
/** $primaryColor: 主题色；$transitionColor: 过渡色 */
@mixin background($primaryColor, $transitionColor) {
  background: linear-gradient(90deg, $primaryColor 25%, $transitionColor 37%, $primaryColor 50%);
  background-size: 400% 100%;
}
/deep/.u-skeleton__wrapper__content {
  width: 100vw;
  flex: 0 0 100vw;
}
/deep/.u-scroll-list__indicator {
  position: absolute;
  left: -9999px;
}
.cust_nav {
  padding: 0 20rpx;
  width: 100%;
  height: 100%;
  // position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  font-size: 36rpx;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  // justify-content: space-around;
}

.search {
  position: absolute;
  right: 20rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  margin: 35rpx 0;
  // z-index: 999999999;
  // height: 65rpx;
  min-width: 100rpx;

  // background-color: red;
  &.searchBox {
    // height: 65rpx;
    border-radius: 39rpx;
    background-color: white;
    margin-left: 38rpx;
    color: #666666;
    margin-left: 16rpx;
    overflow: hidden;
  }

  .search-icon {
    width: 40rpx;
    height: 40rpx;
    color: #000;
  }

  .text {
    margin-left: 10rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
}
.mt-69 {
  margin-top: 69rpx;
}
.mb-20 {
  margin-bottom: 20rpx;
}
.skeleton-container {
  height: 100%;
  overflow-y: scroll;
}
.skeleton__wrapper {
  margin: 30rpx;
  &-title {
    width: 258rpx;
    height: 40rpx;
    @include background(#aca4d2, #c5c1da);
    border-radius: 6rpx;
    margin-bottom: 32rpx;
  }
  &-swiper {
    padding: 30rpx 10rpx 0;
    &-item {
      height: 100%;
      width: calc(100vw - 70rpx);
      &-image {
        @include background(#4f4582, #635b93);
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }
  }
  &-scroll-list {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    // padding-bottom: 10px;
    &_item {
      margin-right: 25rpx;
      width: 230rpx;
      &:last-of-type {
        margin-right: 0;
      }
      .skeleton__wrapper-scroll-image {
        width: 230rpx;
        height: 282rpx;
        @include background(#4f4582, #635b93);
        border-radius: 20rpx;
      }
      .skeleton__wrapper-scroll-title {
        width: 229rpx;
        height: 33rpx;
        @include background(#aca4d2, #c5c1da);
        border-radius: 6rpx;
        margin-top: 22rpx;
      }
      .skeleton__wrapper-scroll-desc {
        width: 165rpx;
        height: 21rpx;
        @include background(#7d75a2, #8e89a5);
        border-radius: 6rpx;
        margin-top: 11rpx;
      }
    }
  }
  &-card {
    width: 690rpx;
    height: 404rpx;
    background: #2f2d45;
    border-radius: 10rpx;
    padding: 25rpx 24rpx;
    display: flex;
    margin-bottom: 37rpx;
    &__image {
      width: 261rpx;
      height: 353rpx;
      @include background(#4f4582, #635b93);
      border-radius: 20rpx;
      margin-right: 20rpx;
    }
    &__title {
      width: 138rpx;
      height: 26rpx;
      @include background(#aca4d2, #c5c1da);
      border-radius: 6rpx;
      margin-top: 13rpx;
    }
    &__line-2 {
      width: 127rpx;
      height: 42rpx;
      @include background(#d6b89f, #e2cbb7);
      border-radius: 10rpx;
      margin-top: 18rpx;
    }
    &__line-3 {
      width: 64rpx;
      height: 26rpx;
      @include background(#aca4d2, #c5c1da);
      border-radius: 6rpx;
      margin: 14rpx 0 23rpx;
    }
    &__line-4 {
      width: 336rpx;
      height: 20rpx;
      @include background(#aca4d2, #c5c1da);
      border-radius: 6rpx;
      margin-bottom: 10rpx;
    }
    &__line-btn {
      width: 132rpx;
      height: 43rpx;
      @include background(#656475, #727181);
      border-radius: 10rpx;
      margin-top: 50rpx;
      &:first-of-type {
        margin-right: 45rpx;
      }
    }
  }
  &-list {
    display: flex;
    flex-wrap: wrap;
    &-item {
      width: 48%;
      margin-bottom: 40rpx;
      margin-right: 26rpx;
      &:nth-of-type(2n) {
        margin-right: 0;
      }
      &__image {
        height: 450rpx;
        @include background(#4f4582, #635b93);
        border-radius: 20rpx;
      }
      &__title {
        width: 295rpx;
        height: 33rpx;
        @include background(#aca4d2, #c5c1da);
        border-radius: 6rpx;
        margin-top: 22rpx;
      }
      &__desc {
        width: 290rpx;
        height: 21rpx;
        @include background(#7d75a2, #8e89a5);
        border-radius: 6rpx;
        margin-top: 11rpx;
      }
    }
  }
}
.animate {
  animation: skeleton 1.8s ease infinite;
}

@keyframes skeleton {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
.indicator {
  @include flex(row);
  justify-content: center;
  margin: 36rpx 0 41rpx;

  &__dot {
    height: 11rpx;
    width: 11rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 8rpx;
    transition: background-color 0.3s;

    &--active {
      background-color: #ffffff;
      width: 27.5rpx;
      border-radius: 5.5rpx;
    }
  }
}
</style>
